<template>
  <div :class="['search-container', customClass]">
    <el-mention
        v-model="inputMessage"
        class="input-container"
        type="textarea"
        placeholder="给 AI Example 发送消息"
        @keyup.enter="sendMessage"
        :style="{height: mentionHeight}"
    >
    </el-mention>
    <div class="operation-container">
      <div class="left-operation">
        <el-tooltip content="调用新模型，解决推理问题" placement="left-start">
          <el-button color="#404045" round>深度思考</el-button>
        </el-tooltip>
        <el-tooltip content="按需搜索网页" placement="right-start">
          <el-button color="#404045" round>联网搜索</el-button>
        </el-tooltip>
      </div>
      <div class="right-operation">
        <el-tooltip content="上传附件" placement="top">
          <el-button text color="transport" circle class="link-item">
            <el-icon style="font-size: 18px">
              <Connection/>
            </el-icon>
          </el-button>
        </el-tooltip>
        <el-tooltip content="请输入你的问题" :disabled="!isButtonDisabled">
          <el-button color="#4d6bfe" circle :disabled="isButtonDisabled" @click="sendMessage">
            <el-icon>
              <Top/>
            </el-icon>
          </el-button>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, computed} from 'vue';

const props = defineProps({
  // 父组件自定义样式
  customClass: {
    type: String,
    default: '',
  },
  // 自定义输入框高度
  mentionHeight: {
    type: String,
    default: '60px'
  }
});

// 输入框的值
const inputMessage = ref('');

// 发送按钮的禁用状态
const isButtonDisabled = computed(() => {
  return inputMessage.value.trim() === '';
});

// 发送消息
const sendMessage = () => {
  if (inputMessage.value.trim()) {
    messages.value.push({text: inputMessage.value, isUser: true});
    inputMessage.value = '';
    // 模拟系统回复
    setTimeout(() => {
      messages.value.push({text: '这是系统的回复。', isUser: false});
    }, 500);
  }
};
</script>

<style lang="less" scoped>
// 搜索框的背景色
@search-background-color: #404045;

.search-container {
  padding: 10px;
  background-color: @search-background-color;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 0 .5px #5a5a69;

  :deep(.input-container textarea) {
    background-color: transparent;
    box-shadow: none;
    color: var(--color-text-color-balck);
  }

  .operation-container {
    display: flex;
    justify-content: space-between;
    padding-top: 4px;

    .left-operation {
      button {
        border: 1px solid #626262;
      }
    }

    .right-operation {
      .link-item:hover {
        background-color: #424451;
      }
    }
  }
}
</style>
